<template>
  <div class="public">
    <div class="view">
      <RouterView />
    </div>
    <div class="tab">
      <van-tabbar router v-model="active" v-if="$route.meta.isShowBar">
        <van-tabbar-item to="/" icon="eye-o">精选</van-tabbar-item>
        <van-tabbar-item to="/item" icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item to="/cart" icon="cart-o">购物车</van-tabbar-item>

        <van-tabbar-item v-if="isLogin" to="/my" icon="user-o">我的</van-tabbar-item>
        <van-tabbar-item v-else to="/login" icon="user-o">我的</van-tabbar-item>

      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { RouterView } from 'vue-router'

const active = ref(0)

const isLogin = localStorage.getItem('isLogin')
</script>

<style scoped>
.public {
  display: flex;
  flex-direction: column;
}
.view {
  height: 90%;
}
.tab {
  height: 10%;
}
</style>
